<template>
  <div class="app" :class="{ 'app--dark': isDarkTheme }">
    <header class="app-header">
      <h1>Markdown编辑器</h1>
      <!--
        <div class="theme-toggle">
          <button @click="toggleTheme">{{ isDarkTheme ? '切换到亮色主题' : '切换到暗色主题' }}</button>
        </div>
      -->
    </header>
    
    <main class="app-main">
      <MarkdownEditor
        v-model="markdownContent"
        height="565px"
        @save="handleSave"
        @fullscreen-change="handleFullscreenChange"
        @theme-change="handleThemeChange"
        @image-upload="handleImageUpload"
      />
    </main>
    
    <footer class="app-footer">
      <p>
        <a href="https://gitee.com/fluoqiu">LuoQiu</a>
      </p>
      <p>Markdown编辑器 - 基于 Vue 3 + TypeScript</p>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import MarkdownEditor from './components/Editor/MarkdownEditor.vue';
import { useTheme } from './hooks/useTheme';

// 使用主题钩子
const { currentTheme, setTheme, toggleTheme } = useTheme();
const isDarkTheme = computed(() => currentTheme.value === 'dark');

// 示例 Markdown 内容
const markdownContent = ref(`# Vue Markdown 编辑器

## 功能特点

- 实时预览
- 语法高亮
- 主题切换
- 全屏模式
- 工具栏支持

## 代码示例

\`\`\`javascript
const greeting = 'Hello, Markdown!';
console.log(greeting);
\`\`\`

## 表格支持

| 功能 | 描述 |
| ---- | ---- |
| 实时预览 | 编辑时实时查看渲染效果 |
| 语法高亮 | 支持代码语法高亮 |
| 主题切换 | 支持亮色/暗色主题 |

> 这是一个引用示例

**粗体文本** 和 *斜体文本*

[链接示例](https://example.com)

![图片示例](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9SM0luWVNBSVprRTRhcVc4YktlZUJWRDRJRUtvbnc1Nll1bm5VODNuenE0ZW9CN2lhTzFGNWdvcUVHeTlNTXNpY3p5SkpJV2N5cktMWmZTSFhFVFlWRlBRLzY0MA?x-oss-process=image/format,png)
`);

// 事件处理
const handleSave = (content: string) => {
  console.log('保存内容:', content);
  // 这里可以实现保存到本地或发送到服务器的逻辑
};

const handleFullscreenChange = (isFullscreen: boolean) => {
  console.log('全屏模式:', isFullscreen);
};

const handleThemeChange = (theme: string) => {
  console.log('主题切换:', theme);
  setTheme(theme);
};

const handleImageUpload = (file: File) => {
  console.log('上传图片:', file);
  // 这里可以实现图片上传逻辑
  // 示例中仅返回一个本地 URL，实际应用中应该上传到服务器
  const reader = new FileReader();
  reader.onload = (e) => {
    if (e.target && typeof e.target.result === 'string') {
      console.log('图片 URL:', e.target.result);
      // 这里可以将 URL 插入到编辑器中
    }
  };
  reader.readAsDataURL(file);
};
</script>

<style lang="scss">
:root {
  --app-bg-color: #f5f5f5;
  --app-text-color: #333;
  --app-header-bg: #ffffff;
  --app-footer-bg: #ffffff;
  --app-border-color: #e0e0e0;
}

.app--dark {
  --app-bg-color: #121212;
  --app-text-color: #e0e0e0;
  --app-header-bg: #1e1e1e;
  --app-footer-bg: #1e1e1e;
  --app-border-color: #333333;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: var(--app-bg-color);
  color: var(--app-text-color);
}

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: var(--app-header-bg);
  border-bottom: 1px solid var(--app-border-color);
  
  h1 {
    margin: 0;
    font-size: 1.5rem;
  }
  
  .theme-toggle button {
    padding: 0.5rem 1rem;
    background-color: #1890ff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    
    &:hover {
      background-color: #40a9ff;
    }
  }
}

.app-main {
  flex: 1;
  padding: 2rem;
  /* max-width: 1200px; */
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.app-footer {
  padding: 1rem 2rem;
  text-align: center;
  background-color: var(--app-footer-bg);
  border-top: 1px solid var(--app-border-color);
  
  p {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
  }
}
</style>
